<template>
	<div class="pc-zk-file-manage">
		<div class="frame-head">
			<div class="reminder_intor"><i class="el-icon-warning"></i>可将图片拖拽至下方图片区域上传</div>
			<div class="rightinput">
				<div class="upload-demoss">
					<div class="bostudias">
						<a class="bostudias_a1">
							
							<el-button style='' @click.native="deleteSelectedImages" type="warning" icon="search">
								批量删除<span v-if="selectedImages.length != 0">({{ selectedImages.length
									}})</span></el-button>
									<el-button style='' @click.native="deleteSelectedALL" type="danger" icon="search">
								全选删除<span v-if="selectedImages.length != 0"></span></el-button>
							<el-button style='' @click.native="upload" type="danger" icon="search"> 上传</el-button>
							<div class="upload-box" v-if="uploadDialogVisible" ref="uploadbox">
								<div class="tobu_box">
									<div class="upload_top" @mousedown="drag($event)">
										<i class="icon iconfont icon-ziyuan iconziyuan"></i>
										多文件上传
									</div>
									<div class="floatright" @click="closeUploadForm">
										<i class="el-dialog__close el-icon el-icon-close"></i>
									</div>
								</div>
								<div class="spring-blk">
									<el-upload :action="$ala.clientUploadApi()" :on-success="uploadSuccess"
										:before-upload="beforeAvatarUpload" multiple
										:headers="$ala.header('Api/StorageFile/upload')" accept=".jpg,.jpeg,.png,.gif">
										<el-button size="small" type="primary">点击上传</el-button>
									</el-upload>
									<el-upload class="upload-demo" drag :action="$ala.clientUploadApi()"
										:headers="$ala.header('Api/StorageFile/upload')" multiple
										:on-success="uploadSuccess" :before-upload="beforeAvatarUpload"
										accept=".jpg,.jpeg,.png,.gif">
										<i class="el-icon-upload"></i>
										<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
									</el-upload>
									<div class="show_uploadimg">
										<div>
											<img class="uploadimg_img" :src="$ala.urlImage(imgItem)" alt=""
												v-for="(imgItem, imgIndex) in uploadingImages" :key="imgIndex">
										</div>
									</div>
								</div>
							</div>
						</a>
						<a class="bostudias_a2">
							<i class="icon iconfont icon-shixiangxiajiantou- icon3"></i>
						</a>
					</div>
				</div>
				<el-input style='width:222px;' placeholder="搜索" prefix-icon="el-icon-search"
					v-model="searchModel.keyword" class="right_mar"></el-input>
				<el-button style='' @click.native="search(1)" type="primary" icon="search"> 搜索</el-button>
			</div>
		</div>
		<div class="file_content">
			<el-upload :action="$ala.clientUploadApi()" drag multiple :headers="$ala.header('Api/StorageFile/upload')"
				:on-success="uploadSuccess" :before-upload="beforeAvatarUpload" :show-file-list="false"
				accept=".jpg,.jpeg,.png">
				<ul class="file_content_ul" v-if="barTitleSelectIndex === 0" v-loading="loading">
					<li class="file_content_li" v-for="(itemImage, imageIndex) in imageListViewModel" :key="imageIndex"
						@click.stop="fromUpload(itemImage)" :class="{ 'textlihover': hoverIndex == imageIndex }">
						<div class="matter_box">
							<div class="text-imgsbox" @click.stop="selectImage(itemImage, imageIndex)">
								<img :src="$ala.urlImage(itemImage.path)" v-lazy />
							</div>
						</div>
						<div class="text-p">{{ itemImage.name }}</div>
						<el-checkbox class="checkbox" v-model="selectedImages" :label="itemImage.id" size="large">
							<span style="display: none;">{{ itemImage.id }}</span>
						</el-checkbox>
						<div class="remove_but">
							<div class="but1" @click="copyImageUrl($ala.urlImage(itemImage.path))"
								style="color:#ffffff">复制</div>
							<div class="but2" @click="deleteImage(itemImage.id)">删除</div>
						</div>
					</li>
				</ul>
			</el-upload>
		</div>
		<div class="manage_pagina">
			<el-pagination background v-if="barTitleSelectIndex === 0" :current-page="searchModel.pageIndex"
				@current-change="search" :page-size="searchModel.pageSize" @size-change="changeSearchSize"
				:page-sizes="[36, 100, 200, 500]" layout="total,prev, pager, next,sizes, jumper" :total="totalCount">
			</el-pagination>
		</div>
	</div>
</template>
<script>
import service from './service'
import upload from './upload'
import ala from 'ala'
export default {
	props: ['type', 'isTenant'],
	data() {
		return {
			uploadType: false,
			loading: false,
			barTitles: [], // 标题栏
			hoverIndex: null,
			barTitleSelectIndex: 0,
			systemBackGroundImageList: [],
			uploadingImages: [], // 正在上传的图片显示
			selectedImages: [],
			imageListViewModel: [],
			searchModel: {
				keyword: '',
				pageIndex: 1,
				pageSize: 36
			},
			totalCount: 0,
			uploadDialogVisible: false, // 是否显示图片上传
			imageUrl: ''
		}
	},
	mounted() {
		this.init()
	},
	methods: {
		async deleteSelectedImages() {
			if (this.selectedImages.length === 0) {
				this.$message.error('请选择要删除的图片')
			} else {
				 await service.selectDelete(this, this.selectedImages)
			}
		},
		//全选删除
		async deleteSelectedALL() {
			if (this.selectedImages.length !== 0) {
				this.selectedImages = []
			} 
			this.imageListViewModel.forEach(item => {
			this.selectedImages.push(item.id) 
})
			service.selectDelete(this, this.selectedImages).then((res) => {
					this.search(1)
				}).catch(() => {
					this.selectedImages = []
				})
		},
		chooseTitleBar(index) {
			this.barTitleSelectIndex = index
		},
		upload() {
			upload.upload(this)
		},
		fromUpload(val) {
			this.imageUrl = val.path
			this.$emit('saveImage', this.imageUrl)
		},
		async init() {
			this.headers = {
				'zk-tenant': this.$ala.tenant()
			}
			await service.search(this)
		},
		async search(pageIndex) {
			this.searchModel.pageIndex = pageIndex
			this.imageListViewModel = []
			await service.search(this)
		},
		async changeSearchSize(pageSize) {
			this.searchModel.pageSize = pageSize
			await this.search(1)
		},
		uploadSuccess(res, file) {
			if (res) {
				this.$message.success('上传成功')
				this.uploadingImages.push(res.result.path)
				// this.init()
				this.search(1)
			} else {
				this.$message.error('上传失败，请重新上传')
			}
		},
		beforeAvatarUpload(file) {
			var isJPEG = file.type === 'image/jpeg'
			var isPNG = file.type === 'image/png'
			var isJPG = file.type === 'image/jpg'
			var isGIF = file.type === 'image/gif'
			if (!isJPEG && !isPNG && !isJPG && !isGIF) {
				this.$message.error('图片只能是 JPG/PNG/JPEG 格式!')
				return isJPEG && isPNG && isJPG
			}
		},
		closeUploadForm() {
			this.uploadDialogVisible = false
		},
		// 选择图片
		selectImage(image, Indeximg) {
			this.hoverIndex = Indeximg
			this.$emit('selectFileChildEvent', image.path)
		},
		// 拖动文件上传框
		drag(e) {
			upload.drag(this, e)
		},
		async deleteImage(id) {
			service.delete(this, id)
		},
		copyImageUrl(url) {
			service.copyImageUrl(this, url)
		},
		colseFileManger() {
			this.$emit('fileManagerClose', false)
		}
	}
}
</script>
<style rel="stylesheet/scss" lang="scss">
@import "./style.scss";
</style>